<template>
  <div>
    <el-card class="box-card">
      <div>
        <div class="contact">
          <span style="font-size: 20px">联系我</span>
          <el-image src="https://wygandwdn.cn/beautiful.jpg"></el-image>
        </div>
        <div>
          <span style="font-weight: normal;font-size: 13px;margin-right: 20px"></span>
          <span style="font-weight: normal;font-size: 13px;"></span>
        </div>
      </div>
      <div class="blog_details">
          <div class="article">
            <p style="font-size: 15px">文章</p>
            <p style="font-size: 20px">{{count.blogCount}}</p>
          </div>
          <div class="type">
            <p style="font-size: 15px">分类</p>
            <p style="font-size: 20px">{{count.TypeCount}}</p>
          </div>
          <div>
            <p style="font-size: 15px">标签</p>
            <p style="font-size: 20px">{{count.tagCount}}</p>
          </div>
      </div>
      <a class="my_gitee" href="https://gitee.com/weng-zewei" target="_blank">gitee</a>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="d-flex align-items-center">
        <span style="margin-right: 80px"><i class="el-icon-date"></i>最新文章</span>
      </div>
      <div v-for="(blog,key) in latestBlog" :key="key">
        <div style="margin-bottom: 5px">
          <span style="font-size: 12px;color: #7a7a7a">{{blog.createTime}}</span>
          <router-link :to="'/article/'+blog.id" tag="span" style="display: table;font-weight: bold;font-size: 16px;color: black">
            {{blog.title}}
          </router-link>
          <span style="font-size: 11px;color: #7a7a7a">{{blog.typeName}}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: {},
      latestBlog: []
    }
  },
  methods: {
    getLatestBlog () {
      this.$axios.get('/blog/getLatestBlog').then(response => {
        // console.log(response.data)
        this.$set(this, 'latestBlog', response.data.data)
        this.convertBlog(this.latestBlog)
      }).catch(error => {
        console.log(error)
      })
    },
    getCounts () {
      this.$axios.get('/blog/getCounts').then(response => {
        this.$set(this, 'count', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    convertBlog (blogList) {
      var i = 0
      for (; i < blogList.length; i++) {
        var d = new Date(blogList[i].createTime)
        blogList[i].createTime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      }
    }
  },
  created () {
    this.getCounts()
    this.getLatestBlog()
  }
}
</script>

<style lang="less" scoped>
.box-card{
  width: 300px;
}
.box-card .item:hover {
  color: #409EFF;
  cursor: pointer;
}
.box-card span {
  font-weight: bold;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.contact{
  text-align: center;
}
.blog_details{
  display: flex;
  text-align: center;
  margin-left: 10px;
}
.article{
  margin-right: 29%;
}
.type{
  margin-right: 29%;
}
.my_gitee{
  border-radius: 290486px;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #3273dc;
  border-color: transparent;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display:block;
}
</style>
